<template>
    <div class="tableDiv">
        
        <el-form class="formBox formBox1" ref="form" size="small" :inline="true" label-width="68px">
            <el-row v-for="(item, index) in appointItem" :key="index">
                <div class="itemDiv">
                    <el-form-item label="" prop="medicalEquipment">
                        {{ item.medicalEquipment }}
                    </el-form-item>
                    <el-form-item label="" prop="schedulingDate">
                        {{ item.schedulingDate }}
                    </el-form-item>
                    <el-form-item prop="week">
                        {{ item.week }}
                    </el-form-item>
                    <el-form-item prop="timeSlot">
                        {{ item.timeSlot==0?'上午':'下午' }}
                    </el-form-item>
                    <el-form-item prop="schedulingId">
                               <span v-if="item.schedulingId" style="color:rgb(25, 0, 255);">已排班</span>
                               <span v-else style="color:red;">未排班</span>
                    </el-form-item>

                    <el-form-item style="margin-left:20px;" v-if="type==1">
                       
                        <span v-if="item.schedulingId" style="margin-right:20px;">排班可约人数：{{item.appointmentsNumber }}</span>    
                        已预约人数：{{item.appointmentsMadeNum?item.appointmentsMadeNum:0}} (诊间预约：{{item.appointmentList[0].personNum}}人,小程序：{{ item.appointmentList[1].personNum }}人)
                        <span v-if="item.schedulingId&&getLeaveNum(item)>0" style="color:green;margin-left:20px;font-weight:700;">余数：{{getLeaveNum(item) }}</span>
                        <span v-if="item.schedulingId&&getLeaveNum(item)<=0" style="color:red;margin-left:20px;font-weight:700;">余数：{{getLeaveNum(item)<0?0+'(已超出)':0 }}</span>
                    </el-form-item>
                    <el-form-item style="margin-left:20px;" v-if="type==2">
                       
                     排班可约人数：{{item.appointmentsNumber }}  
                     <span style="margin-left:20px;">已预约人数：{{item.appointmentsMadeNum?item.appointmentsMadeNum:0}} </span> 
                     <span v-if="item.schedulingId&&getLeaveNum(item)>0" style="color:green;margin-left:20px;font-weight:700;">余数：{{getLeaveNum(item) }}</span>
                     <span v-if="item.schedulingId&&getLeaveNum(item)<=0" style="color:red;margin-left:20px;font-weight:700;">余数：{{getLeaveNum(item)<0?0+'(已超出)':0 }}</span>
                </el-form-item>
                    <el-form-item prop="open" style="margin-left:20px;" v-if="type==1&&item.schedulingId&&getLeaveNum(item)<=0">
                        <el-checkbox v-model="item.open">是否加约</el-checkbox>
                    </el-form-item>
                </div>
            </el-row>
           
        </el-form>
        <div class="footer" v-if="type==1">
            <el-button  @click="submitAppointment" type="primary" :disabled="(appointItem[0].schedulingId==null||appointItem[0].schedulingId==undefined||appointItem[0].schedulingId&&(getLeaveNum(appointItem[0])>0||getLeaveNum(appointItem[0])<=0&&appointItem[0].open))?false:true">确认预约</el-button>
          
            <el-button @click="cancel">取 消</el-button>
          </div>
          <div class="footer" v-if="type==2">
            <el-button  @click="submitAppointment" type="primary" >确认启用</el-button>
          
            <el-button @click="cancel">取 消</el-button>
          </div>
    </div>
</template>
  
<script>
import store from "@/store";

export default {
    name: "appointTip",
    components: {},
    props: ["appointItem", "type"],
    dicts: [],
    data() {
        return {
            //type = 1  预约  type= 2  启用排班
           
        };
    },
    created() {

    },
    mounted() {
         
    },
    methods: {
        getLeaveNum(item){
            let num=0
            num=item.appointmentsNumber-item.appointmentsMadeNum //余额
            return num
        },
        submitAppointment(){
           let data=this.appointItem
           console.log(data)
           this.$emit('comfirm',data)
        },
        cancel(){
            this.$emit('closeappointTipDialogVisible')
        }




    },
};
</script>
<style scoped lang="scss">
.red{
    color:red
}
.footer{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
  